<template>
  <el-row :id="vjson.id" :key="vjson.id"
          :class="[calcClass,'yv-toolbar', vjson.isFlat?'yv-toolbar-flat':'']"
          :style="calcStyle"
          @selectme.native="_selectMe"
          @click.stop="_selectMe">
    <el-divider v-if="vjson.isFooterToolbar"></el-divider>
    <draggable :list="vjson.items" item-key="id"
               v-bind="{group:'fieldGroup', ghostClass: 'ghost'}"
               :class="['yv-field-container', vjson.alignRight?'to-right':'']"
               @end="_onDragEnd" @add="(evt)=>_onDragAdd(evt, vjson.items, vjson)"
               @update="_onDragUpdate" :move="_checkMove">
      <template #item="{ element: item, index }">
        <component :is="getDesignCmp(item)" :key="item.id"
                   :vjson="item"
                   :vcxt="vcxt"
                   :designer="designer"
                   :parent-list="vjson.items"
                   :index-of-parent-list="index"
                   :parent-component="vjson"
                   :design-state="true"></component>
      </template>
      <template #header>
        <div class="no-widget-hint" style="height: 50px;width:100%;" v-if="(vjson.items ?? []).length === 0">
          拖拽组件放置于此处
        </div>
      </template>
    </draggable>
  </el-row>
</template>

<script>
import _ from 'lodash'
import WebDesignMixin from "../WebDesignMixin"
import ToolbarMeta from "./ToolbarMeta";

export default {
  mixins: [WebDesignMixin],
  methods: {},
}
</script>

<style lang="less">
.el-row.yv-toolbar-container {
  min-height: 50px;
  line-height: 48px;
  //padding: 6px;
  outline: 1px dashed #336699;

  .form-widget-list {
    min-height: 28px;
  }
}

.yv-design-mode {
  .yv-toolbar {
    width: 100%;
    min-height: 42px;

    & > .yv-field-container {
      width: 100%;
    }
  }

  .template-two {
    .header {
      .toolbar {
        background: none;
        padding-top: 0;

        & > .toolbar-wrap {
          padding-top: 0;

          .yv-toolbar {
            overflow: hidden;
            height: 40px;

            .transition-group-el + .transition-group-el {
              margin-left: 12px;
            }
          }
        }
      }
    }
  }
}

.el-row.yv-toolbar {
  .yv-field-container {
    display: flex;

    div:not(.yv-staticfield) + button {
      position: relative;
      top: -2px
    }
  }
}
</style>